<template>
  <div>
    <span class="title">新用户注册</span>
    <el-form
      ref="account_form"
      :model="account"
      :rules="rules"
      label-position="left"
      class="account_form"
    >

      <el-upload
          method="put"
          :before-upload="beforeAvatarUpload"

          on-success="handlePictureCardSuccess"
          action="#"
          list-type="picture-card"
          :http-request="handleUpload"
      >
        <el-icon>
          <plus />
        </el-icon>
      </el-upload>

      <el-form-item prop="username">
        <el-input placeholder="请输入昵称" v-model="account.username">
          <template v-slot:prepend><el-icon><User /></el-icon></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="authKey">
        <el-input placeholder="请输入用户名" v-model="account.authKey">
          <template v-slot:prepend><el-icon><User /></el-icon></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" show-password v-model="account.password">
          <template v-slot:prepend><el-icon><Unlock /></el-icon></template>
        </el-input>
      </el-form-item>
      <div class="actions">
        <el-button type="primary" class="action_button" @click="registerAccount(account_form)">注册</el-button>
        <el-button class="action_button" @click="$emit('changeMode')">返回 </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import api from '@/api'

import { reactive, ref, useTemplateRef } from 'vue'
import {Iphone, Plus, Promotion, Unlock, User} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from "axios";

const router = useRouter()
const account = ref({
  avatarAddr: '',
  username: '',
  authKey: '',
  password: '',

})

 const account_form = ref()

const rules = reactive({
  username: [{ required: true, message: '请填写昵称', trigger: 'blur' }],
  authKey: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
})

/**
 * 用户注册
 */
function registerAccount(accountFormRef) {
  accountFormRef.validate((valid) => {
    if (valid) {

    } else {
      return false
    }
  })
}

const imageUrl = ref('')

const handleAvatarSuccess = (
    response,
    uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('只支持jpeg和png格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 20) {
    ElMessage.error('不能超过20MB!')
    return false
  }
  return true
}

const handleUpload = async ({ file, onProgress, onSuccess, onError }) => {
  try {
    // 1. 获取上传地址
    const uploadUrlResponse = await api.file.getUploadUrl("user-avatar", file.name)
    const uploadUrl = uploadUrlResponse.data.data
    console.log(uploadUrl)
    // 2. 创建 FormData 对象并添加文件
    // 3. 使用 axios 上传文件
    const response = await axios.put(uploadUrl, file, {
      headers: {
        'Content-Type': file.type,
      }
    })
    console.log('🚀 ~ handleUpload ~ response:', response)
    if (response.status === 200) {
      ElMessage.success({
        message: '上传成功',
        type: 'success',
      })
      if (onSuccess) {
        onSuccess(response.data) // 上传成功时的回调
        // 添加文件到 fileList 以便预览
      }
    } else {
      ElMessage.error('上传失败')
    }
  } catch (error) {

  }
}
</script>

<style scoped>
.logo {
  width: 120px;
  height: 120px;
  display: block;
  padding: 70px 0 0 165px;
}

.title {
  width: 100%;
  display: block;
  text-align: center;
  padding-top: 20px;
  line-height: 1em;
  color: #333;
  font-size: 20px;
  font-family:
    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
    Arial, sans-serif;
}

.account_form {
  padding: 50px 40px 50px 40px;
}

.actions {
  width: 100%;
  display: block;
  text-align: center;
}

.action_button {
  width: 150px;
}

hr {
  height: 0;
  width: 90%;
  border: 1px solid #bbb;
  border-bottom: 0;
}

i {
  font-size: 18px;
}


.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
